<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>服务器备份服务</title>
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
	<style>
		body {
		    -webkit-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none;
		    padding: 15px;
		}
	  </style>
</head>
<body>
	<form class="layui-form" th:object="${backup}" style="margin-top:10px;">
		<input name="id" th:field="*{id}" type="hidden">
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">任务名称</label>
				<div class="layui-input-block">
					<input type="text" name="name" th:field="*{name}" placeholder="请输入任务名称" class="layui-input" lay-verify="required"/>
				</div>
		    </div>
		    <div class="layui-inline">
				<label class="layui-form-label">备份时间</label>
				<div class="layui-input-block">
					<input type="text" name="backupTime" class="layui-input" th:field="*{backupTime}" id="backupTime"  placeholder="请选择备份时间" lay-verify="required">
				</div>
			</div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">保存路径</label>
				<div class="layui-input-block">
					<input type="text" id = "dirPath" name="dirPath" th:field="*{dirPath}" placeholder="请输入保存路径" class="layui-input" lay-verify="required|pathverify"/>
				</div>
		    </div>
		    <div class="layui-inline">
				<label class="layui-form-label">备份路径</label>
				<div class="layui-input-block">
					<input type="text" id = "serverPath" name="serverPath" th:field="*{serverPath}" placeholder="请输入远程备份路径" class="layui-input" lay-verify="required|pathverify"/>
				</div>
			</div>
		</div>
	
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">备份名称</label>
				<div class="layui-input-block">
					<input type="text" name="backupName" th:field="*{backupName}" placeholder="请输入备份名称" class="layui-input" lay-verify="required" />
				</div>
		    </div>
		    <div class="layui-inline">
				<label class="layui-form-label">主机地址</label>
				<div class="layui-input-block">
					<input type="text" name="serverHost" th:field="*{serverHost}" placeholder="请输入主机地址" class="layui-input"  lay-verify="required|ipverify"/>
				</div>
			</div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">账号</label>
				<div class="layui-input-block">
					<input type="text" name="serverUser" th:field="*{serverUser}" placeholder="请输入账号" class="layui-input" lay-verify="required" />
				</div>
		    </div>
		    <div class="layui-inline">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input type="text" name="serverPwd" th:field="*{serverPwd}" placeholder="请输入密码" class="layui-input" lay-verify="required" />
				</div>
			</div>
		</div>
		
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入内容" class="layui-textarea" name="remark">[[*{remark}]]</textarea>
			</div>
		</div>
		
	    <div class="layui-form-item">
			<div class="layui-input-block">
			    <button id="btn-submit" type="submit" class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius" lay-submit lay-filter="backup-edit">
					立即提交
				</button>
				<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-radius">
					重置
				</button>
			</div>
		</div>
	</form>
</body>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
    layui.use(['form', 'jquery', 'laydate'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;

        let prefix = "/backup/";
        
        laydate.render({
            elem: '#backupTime',
            type: 'time'
        });
        
        form.verify({
        	pathverify: function (value) {
				if (!validateFolderPath(value)) {
				    return '请输入正确的路径';
				}
            },
            ipverify:function(value){
            	if(!validateIP(value)){
            		return '请输入正确的主机地址';
            	}
            }
        });
        
        form.on('submit(backup-edit)', function (data) {
        	$('#btn-submit').attr('disabled', true);// 禁用按钮防止重复提交
            $.ajax({
                url: prefix + 'update',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    if (result.success) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.layui.table.reload("backup-table");
                        });
                    } else {
                    	$('#btn-submit').attr('disabled', false);
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });
        
        
		window.validateFolderPath = function(path) {
			// 判断路径是否为空
			if (!path) {
				return false;
			}
			// 匹配 Windows 文件夹路径格式
			const windowsRegex = /^[a-zA-Z]:\\(?:[^\\:*?"<>|\r\n]+\\)*[^\\:*?"<>|\r\n]*\\?$/;
			// 匹配 Linux 文件夹路径格式
			const linuxRegex = /^\/(\w+\/?)+$/;
			
			if (windowsRegex.test(path) || linuxRegex.test(path)) {
				return true;
			} else {
				return false;
			}
		}
		
		window.validateIP = function(ip) {
			const pattern = /^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))\.){3}(([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/;
			return pattern.test(ip);
		}
		
	});
    
</script>
</html>